<template>
  <div class="main">
    <!-- 底层背景动画-开始 -->
    <div id="animations">
      <div class="animation animation1">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation2">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation3 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation4">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation5 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation6">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation7 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation8">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation9 fanzhuan">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
      <div class="animation animation10">
        <div class="animate1"></div>
        <div class="animate2"></div>
        <div class="animate3"></div>
      </div>
    </div>
    <div class="header"><isep-header /></div>
    <div class="content">
      <div class="content-left">
        <div style="height: 36%; display: flex">
          <item-border3
            class="content-left-item first"
            style="width: 45%"
            title="日计划"
            :more="true"
            :params="{ pdtaskplan: true }"
            @itemMore="itemMore"
          >
            <isep-left-top></isep-left-top>
          </item-border3>
          <div class="content-left-item first" style="display: flex">
            <isep-center-lefttop></isep-center-lefttop>
          </div>
        </div>

        <div style="height: 30%; display: flex">
          <item-border3
            class="content-left-item"
            style="width: 45%"
            title="发出工作票"
            :more="true"
            :params="{ workticket: true }"
            @itemMore="itemMore"
          >
            <isep-left-centertop></isep-left-centertop>
          </item-border3>
          <div
            class="content-left-item"
            style="display: flex; background: rgb(31, 53, 249, 0.15); border: 1px solid rgba(8, 67, 137, 0.7)"
          >
            <isep-center-leftcenter style="width: 100%; height: 100%"></isep-center-leftcenter>
          </div>
        </div>

        <div style="height: 33%; display: flex">
          <item-border3 class="content-left-item" title="作业进行时">
            <isep-left-center></isep-left-center>
          </item-border3>
          <item-border3 title="典型配煤“套餐”">
            <isep-center-left-bottom-left :sisData="dataModel"></isep-center-left-bottom-left>
          </item-border3>
          <item-border3 title="输煤测温" style="margin-left: 5px">
            <isep-right-4></isep-right-4>
          </item-border3>

          <item-border3 title="多源供热模式">
            <isep-center-right3 :sisData="dataModel" ref="centerRight3Ref"></isep-center-right3>
          </item-border3>
        </div>
      </div>
      <div class="content-right">
        <item-border3 class="content-item-height300 first" title="技术监督指标">
          <isep-right-2 :sisData="dataModel"></isep-right-2>
        </item-border3>
        <item-border4 class="content-item-height50" title="三色振动管理">
          <isep-right-3 :sisData="dataModel"></isep-right-3>
        </item-border4>

        <item-border3 title="未来三天新能源负荷预测" class="content-item-height150">
          <isep-omo-loadforecase></isep-omo-loadforecase>
        </item-border3>
      </div>
    </div>
  </div>
  <omo-pdtaskplan-dialog
    v-if="dialog.pdtaskplan"
    v-show="dialog.pdtaskplan"
    ref="pdtaskplanDialog"
    @closed="dialog.pdtaskplan = false"
  ></omo-pdtaskplan-dialog>
  <omo-workticket-dialog
    v-if="dialog.workticket"
    v-show="dialog.workticket"
    ref="workticketDialog"
    @closed="dialog.workticket = false"
  ></omo-workticket-dialog>
</template>
<script>
import isepApi from '@/api/isep'
import ItemBorder3 from '@/components/ItemBorder3/index.vue'
import ItemBorder4 from '@/components/ItemBorder4/index.vue'
import IsepHeader from './components/Header.vue'
import IsepLeftTop from './components/IsepLeftTop.vue'
import IsepLeftCenter from './components/LeftCenter.vue'
import IsepLeftCentertop from './components/LeftCentertop.vue'
// import IsepLeftBottom from './components/LeftBottom.vue'
import IsepCenterLefttop from './components/CenterLefttop.vue'
import IsepCenterLeftcenter from './components/CenterLeftcenter2.vue'
import IsepOmoLoadforecase from './components/OmoLoadforecase.vue'
// import IsepOmoCoalinout from './components/OmoCoalinout.vue'
// import IsepOmoCoalinout from './components/CenterLeftcenter.vue'
// import IsepRight1 from './components/IsepRight1.vue'
import IsepRight2 from './components/IsepRight2.vue'
import IsepRight3 from './components/IsepRight3.vue'
import IsepRight4 from './components/IsepRight4.vue'
// import IsepCenterRight1 from './components/IsepCenterRight1.vue'
// import IsepCenterRight2 from './components/IsepCenterRight2.vue'
import IsepCenterRight3 from './components/IsepCenterRight32.vue'
import IsepCenterLeftBottomLeft from './components/IsepCenterLeftBottomLeft.vue'
// import IsepOmoRegulartask from './components/OmoRegulartask.vue'
import OmoPdtaskplanDialog from './components/OmoPdtaskplanDialog.vue'
import OmoWorkticketDialog from './components/OmoWorkticketDialog.vue'
export default {
  name: 'IsepIndex',
  components: {
    IsepHeader,
    ItemBorder3,
    ItemBorder4,
    IsepLeftTop,
    IsepLeftCenter,
    IsepLeftCentertop,
    // IsepLeftBottom,
    IsepCenterLefttop,
    IsepCenterLeftcenter,
    IsepOmoLoadforecase,
    // IsepOmoCoalinout,
    // IsepRight1,
    IsepRight2,
    IsepRight3,
    IsepRight4,
    // IsepCenterRight1,
    // IsepCenterRight2,
    IsepCenterLeftBottomLeft,
    IsepCenterRight3,
    // IsepOmoRegulartask,
    OmoPdtaskplanDialog,
    OmoWorkticketDialog
  },
  data() {
    return {
      dialog: {
        pdtaskplan: false,
        workticket: false
      },
      timer: {},
      lockReconnect: false,
      ws: null,
      tt: null,
      dataModel: {
        HY_1_004: 0,
        HY_2_004: 0,
        HY_1_007: 0,
        HY_2_007: 0,
        HY_1_008: 0,
        HY_2_008: 0,
        HY_1_176: 0,
        HY_2_176: 0,
        HY_1_024: 0,
        HY_2_024: 0,
        HY_1_049: 0,
        HY_2_049: 0,
        HY_1_153: 0,
        HY_2_153: 0,
        HY_2_171: 0,
        HY_1_171: 0,
        HY_1_183: 0,
        HY_2_183: 0,
        HY_1_195: 0,
        HY_2_195: 0,
        HY_1_427: 0,
        HY_2_427: 0,
        '1DCS_SELMW': 0,
        '2DCS_SELMW': 0,
        '1DCS_COM_RBGRL_GJ': 0,
        TFL_1005_SH0040_AALM1: 0,
        '1DCS_COM_DGLGRL_GJ': 0,
        TFL_1011_SH0082_AALM6: 0
      },
      wsUrl: 'ws://10.66.152.17:8091/websocket/isep'
    }
  },
  mounted() {
    this.initLoadData()
    let speed = 3000
    const self = this
    this.timer = function () {
      self.initLoadData()
    }
    setInterval(this.timer, speed)
    // this.createWebSocket()
  },
  unmounted() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    itemMore(params) {
      Object.assign(this.dialog, params)
      this.$nextTick(() => {
        if (params.pdtaskplan) {
          this.$refs.pdtaskplanDialog.open()
        } else if (params.workticket) {
          this.$refs.workticketDialog.open()
        }
      })
    },
    initLoadData() {
      isepApi.getLoadCurveByRedis().then((res) => {
        this.dataModel = res.data
        this.$refs.centerRight3Ref.setData(this.dataModel)
      })
    },
    print() {
      this.dataModel.HY_1_007 = Math.random()
      this.dataModel['1DCS_SELMW'] = Math.random() * 300
      this.dataModel['2DCS_SELMW'] = Math.random() * 300
      console.log(this.dataModel)
    },
    init() {
      const self = this
      this.ws.onclose = function (e) {
        console.log('链接关闭' + e.code + new Date().getTime())
        // 服务器关闭  不重连
        if (e.code != 1006) {
          this.reconnect()
        }
      }
      this.ws.onerror = function () {
        console.log('发生异常了' + new Date().getTime())
      }
      this.ws.onopen = function () {
        console.log('连接成功' + new Date().getTime())
      }

      this.ws.onmessage = function (e) {
        self.dataModel = Object.assign(self.dataModel, JSON.parse(e.data))
      }
    },
    reconnect() {
      if (this.lockReconnect) {
        return
      }
      this.lockReconnect = true
      //没连接上会一直重连，设置延迟避免请求过多，  有定时任务 先取消再设置
      this.tt && clearTimeout(this.tt)
      this.tt = setTimeout(function () {
        this.createWebSocket()
        this.lockReconnect = false
      }, 2000)
    },
    createWebSocket() {
      try {
        this.ws = new WebSocket(this.wsUrl)
        this.init()
      } catch (e) {
        console.log('catch' + e)
        this.reconnect()
      }
      //setInterval(this.print, 2000)
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  position: relative;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 35px;
  overflow: hidden;
  font-size: 30px;
  background-color: #11286c;
}

#animations {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.animation {
  position: absolute;
}
.animation1 {
  left: 1%;
  top: 1%;
  transform: scale(1);
}
.animation2 {
  left: 0.5%;
  bottom: 13%;
  transform: scale(0.5);
}
.animation3 {
  left: 20%;
  top: 60%;
  transform: scale(1);
}
.animation4 {
  left: 30%;
  top: 15%;
  transform: scale(0.9);
}
.animation5 {
  left: 45%;
  top: 2%;
  transform: scale(0.3);
}
.animation6 {
  left: 60%;
  top: -2%;
  transform: scale(0.8);
}
.animation7 {
  left: 70%;
  top: 40%;
  transform: scale(1);
}
.animation8 {
  right: 12%;
  top: 8%;
  transform: scale(1.1);
}
.animation9 {
  left: 90%;
  bottom: 12%;
  transform: scale(1);
}
.animation10 {
  left: 50%;
  top: 80%;
  transform: scale(1.5);
}
.animation10 div {
  animation-direction: reverse;
}
.animation div {
  position: absolute;
  top: 0;
  left: 0;
  width: 218px;
  height: 218px;
  border-radius: 50%;
  animation: move linear infinite;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.animation .animate1 {
  background: url('@/assets/isep/1.png') no-repeat;
  background-size: 100%;
  animation-duration: 30s;
}
.animation .animate2 {
  background: url('@/assets/isep/2.png') no-repeat;
  background-size: 100%;
  animation-duration: 20s;
  animation-direction: reverse;
}
.animation .animate3 {
  background: url('@/assets/isep/3.png') no-repeat;
  background-size: 100%;
  animation-duration: 15s;
}
.fanzhuan .animate1 {
  animation-direction: reverse;
  animation-duration: 25s;
}
.fanzhuan .animate2 {
  animation-direction: normal;
  animation-duration: 15s;
}
.fanzhuan .animate3 {
  animation-direction: reverse;
  animation-duration: 10s;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.header {
  width: 100%;
  height: 80px;
}
.content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  height: calc(100% - 50px);
  .content-left {
    width: 74%;
    height: auto;
    padding-left: 5px;
  }
  .content-right {
    width: 26%;
    height: auto;
    padding-right: 5px;
  }
  .content-left-item {
    width: 100%;
    margin-top: 5px;
  }
  .content-right-item {
    width: 100%;
    height: calc(25% - 2px);
    margin-top: 5px;
  }

  .content-middle {
    width: 46%;
    height: auto;
  }
  .content-middle-item {
    width: 100%;
    height: 33.5%;
    margin-top: 5px;
  }

  .content-middle2 {
    width: 17%;
    height: auto;
  }
  .content-middle2-item {
    width: 100%;
    height: 33%;
    margin-top: 5px;
  }
  .first {
    margin-top: 0;
  }
  .content-item-height150 {
    width: 100%;
    height: 170px;
    margin-top: 5px;
  }
  .content-item-height300 {
    width: 100%;
    height: 325px;
    margin-top: 5px;
  }
  .content-item-height20 {
    width: 100%;
    height: 21%;
    margin-top: 5px;
  }
  .content-item-height25 {
    width: 100%;
    height: 22%;
    margin-top: 5px;
  }
  .content-item-height50 {
    width: 100%;
    height: calc(100% - 520px);
    margin-top: 5px;
  }
}
</style>
